<template>
	<view class="page mine">
		<view class="mine-bg">
			<nav-bar class="mine-bg" :exit="true" @exit="onQuit">我的</nav-bar>
			<uni-card :is-shadow="false" is-full :border="false">
				<view class="content" @click="onModifyInfo()">
					<head-image :name="userInfo.nickName" :url="userInfo?.headshot" :size="120"></head-image>
					<view class="info-item">
						<!-- <view class="info-primary">
							<text class="info-username">
								{{ userInfo.userName }}
							</text>
							<text v-show="userInfo.sex == 0" class="iconfont icon-man" color="darkblue"></text>
							<text v-show="userInfo.sex == 1" class="iconfont icon-girl" color="darkred"></text>
						</view> -->
						<view class="info-text">
							<!-- <text class="label-text">
								昵称:
							</text> -->
							<text class="nick_text">
								{{ userInfo.nickName }}
							</text>
						</view>
						<!-- <view class="info-text">
							<view>
								<text class="label-text">
									签名:
								</text>
								<text class="content-text">
									{{ userInfo.signature }}
								</text>
							</view>
						</view> -->
					</view>
				</view>
			</uni-card>
		</view>
		<view class="mine_content">
			<view class="mine_main mine_bottom" @tap="onHelpCentre()">
				<view class="mine_main_icon">
					<image src="/static/images/icon/help.png" mode=""></image>
				</view>
				<view class="mine_main_value">帮助中心</view>
				<view class="mine_main_right">
					<image src="/static/images/icon/enter.png" mode=""></image>
				</view>
			</view>
			<view class="mine_main mine_bottom">
				<view class="mine_main_icon">
					<image src="/static/images/icon/about.png" mode=""></image>
				</view>
				<view class="mine_main_value">关于系统</view>
				<view class="mine_main_info">
					版本1.0
				</view>
			</view>
		</view>
		<!-- <bar-group>
			<arrow-bar title="修改密码" icon="icon-modify-pwd" @tap="onModifyPassword()"></arrow-bar>
		</bar-group> -->
		<!-- <bar-group>
			<btn-bar title="退出登录" type="danger" @tap="onQuit()"></btn-bar>
		</bar-group> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			onModifyInfo() {
				// uni.navigateTo({
				// 	url: "/pages/mine/mine-edit"
				// })
			},
			onModifyPassword() {
				uni.navigateTo({
					url: "/pages/mine/mine-password"
				})
			},
			onHelpCentre() {
				uni.navigateTo({
					url: "/pages/mine/help"
				})
			},
			onQuit() {
				uni.showModal({
					title: '确认退出?',
					success: (res) => {
						if (res.confirm) {
							console.log(getApp())
							getApp().$vm.exit()
						}
					}
				});
			}
		},
		computed: {
			userInfo() {
				return this.userStore.userInfo;
			}
		}


	}
</script>

<style scoped lang="scss">
	.mine-bg {
		background: #EFF4FF;
	}

	.mine_content {
		margin-top: 18rpx;
	}

	.mine_bottom {
		margin-bottom: 2rpx;
	}

	.mine_main {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 29rpx 24rpx 28rpx 50rpx;

		.mine_main_icon {
			width: 42rpx;
			height: 42rpx;
			margin-right: 18rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mine_main_value {
			font-weight: bold;
			font-size: 30rpx;
			color: #3D3D3D;
		}

		.mine_main_right {
			width: 26rpx;
			height: 26rpx;
			margin-left: auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mine_main_info {
			font-weight: 400;
			font-size: 30rpx;
			color: #767676;
			margin-left: auto;
		}
	}

	.mine {
		.content {
			//height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 20rpx;

			.info-item {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding-left: 40rpx;
				flex: 1;

				.info-text {
					line-height: 1.5;
					//margin-bottom: 10rpx;
				}

				.label-text {
					font-size: $im-font-size-small;
					color: $im-text-color-light;

				}

				.nick_text {
					font-weight: bold;
					font-size: 30rpx;
					color: #3D3D3D;
				}

				.content-text {
					font-size: $im-font-size-small;
					color: $im-text-color-light;
				}

				.info-primary {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.info-username {
						font-size: $im-font-size-large;
						font-weight: 600;
					}

					.icon-man {
						color: $im-text-color;
						font-size: $im-font-size-large;
						padding-left: 10rpx;
					}

					.icon-girl {
						color: darkred;
					}
				}
			}

			.info-arrow {
				width: 50rpx;
				font-size: 30rpx;
				position: relative;
				left: 30rpx;
			}
		}

	}
</style>